<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";//http://192.168.1.1:8080/abc/abc.jsp
%>
<base href="<%=basePath%>">
<html lang="zh">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户前台首页</title>
    <link rel="stylesheet" href="user/css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="user/css/default.css">
    <link rel="stylesheet" type="text/css" href="user/css/offcanvas.min.css">
    <!--图片滑动-->
    <link type="text/css" rel="stylesheet" href="user/css/style.css">
    <!---->
    <link href="user/css/zzsc.css" rel="stylesheet" />
    <link rel="stylesheet" type="text/css" href="user/css/bootstrap-grid.min.css" />
    <style type="text/css">
        .main-timeline{
            font-family: 'Roboto', sans-serif;
            padding: 20px 0;
            position: relative;
        }
        .main-timeline:before,
        .main-timeline:after{
            content: '';
            height: 40px;
            width: 40px;
            background-color: #e7e7e7;
            border-radius: 50%;
            border: 10px solid #303334;
            transform:translateX(-50%);
            position: absolute;
            left: 50%;
            top: -15px;
            z-index: 2;
        }
        .main-timeline:after{
            top: auto;
            bottom:15px;
        }
        .main-timeline .timeline{
            padding: 35px 0;
            margin-top: -30px;
            position: relative;
            z-index: 1;
        }
        .main-timeline .timeline:before,
        .main-timeline .timeline:after{
            content: '';
            height: 100%;
            width: 50%;
            border-radius: 100px 0 0 100px;
            border: 15px solid #46B2BC;
            border-right: none;
            position: absolute;
            left: 0;
            top: 0;
            z-index: -1;
        }
        .main-timeline .timeline:after{
            height: calc(100% - 30px);
            width: calc(50% - 12px);
            border-color: #65C7D0;
            left: 12px;
            top: 15px;
        }
        .main-timeline .timeline-content{ display:inline-block; }
        .main-timeline .timeline-content:hover{ text-decoration: none; }
        .main-timeline .timeline-year{
            color: #65C7D0;
            font-size: 50px;
            font-weight: 600;
            display: inline-block;
            transform:translateY(-50%);
            position: absolute;
            top: 50%;
            left: 10%;
        }
        .main-timeline .timeline-icon{
            color: #65C7D0;
            font-size: 80px;
            display: inline-block;
            transform: translateY(-50%);
            position: absolute;
            left: 34%;
            top: 50%;
        }
        .main-timeline .content{
            color: #909090;
            width: 50%;
            padding: 20px;
            display: inline-block;
            float: right;
        }
        .main-timeline .title{
            color: #65C7D0;
            font-size: 22px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin: 0 0 5px 0;
        }
        .main-timeline .description{
            font-size: 15px;
            letter-spacing: 1px;
            margin: 0;
        }
        .main-timeline .timeline:nth-child(even):before{
            left: auto;
            right: 0;
            border-radius: 0 100px 100px 0;
            border: 15px solid red;
            border-left: none;
        }
        .main-timeline .timeline:nth-child(even):after{
            left: auto;
            right: 12px;
            border: 15px solid green;
            border-left: none;
            border-radius: 0 100px 100px 0;
        }
        .main-timeline .timeline:nth-child(even) .content{ float: left; }
        .main-timeline .timeline:nth-child(even) .timeline-year{
            left: auto;
            right: 10%;
        }
        .main-timeline .timeline:nth-child(even) .timeline-icon{
            left: auto;
            right: 32%;
        }
        .main-timeline .timeline:nth-child(5n+2):before{ border-color: #EA3C14; }
        .main-timeline .timeline:nth-child(5n+2):after{ border-color: #EF5720; }
        .main-timeline .timeline:nth-child(5n+2) .timeline-icon{ color: #EA3C14; }
        .main-timeline .timeline:nth-child(5n+2) .timeline-year{ color: #EA3C14; }
        .main-timeline .timeline:nth-child(5n+2) .title{ color: #EA3C14; }
        .main-timeline .timeline:nth-child(5n+3):before{ border-color: #8CC63E; }
        .main-timeline .timeline:nth-child(5n+3):after{ border-color: #6CAF29; }
        .main-timeline .timeline:nth-child(5n+3) .timeline-icon{ color: #8CC63E; }
        .main-timeline .timeline:nth-child(5n+3) .timeline-year{ color: #8CC63E; }
        .main-timeline .timeline:nth-child(5n+3) .title{ color: #8CC63E; }
        .main-timeline .timeline:nth-child(5n+4):before{ border-color: #F99324; }
        .main-timeline .timeline:nth-child(5n+4):after{ border-color: #FBB03B; }
        .main-timeline .timeline:nth-child(5n+4) .timeline-icon{ color: #F99324; }
        .main-timeline .timeline:nth-child(5n+4) .timeline-year{ color: #F99324; }
        .main-timeline .timeline:nth-child(5n+4) .title{ color: #F99324; }
        .main-timeline .timeline:nth-child(5n+5):before{ border-color: #0071BD; }
        .main-timeline .timeline:nth-child(5n+5):after{ border-color: #0050A3; }
        .main-timeline .timeline:nth-child(5n+5) .timeline-icon{ color: #0071BD; }
        .main-timeline .timeline:nth-child(5n+5) .timeline-year{ color: #0071BD; }
        .main-timeline .timeline:nth-child(5n+5) .title{ color: #0071BD; }
        @media screen and (max-width:1200px){
            .main-timeline .timeline:after{ border-radius: 88px 0 0 88px; }
            .main-timeline .timeline:nth-child(even):after{ border-radius: 0 88px 88px 0; }
        }
        @media screen and (max-width:767px){
            .main-timeline .timeline{ margin-top: -19px; }
            .main-timeline .timeline:before {
                border-radius: 50px 0 0 50px;
                border-width: 10px;
            }
            .main-timeline .timeline:after {
                height: calc(100% - 18px);
                width: calc(50% - 9px);
                border-radius: 43px 0 0 43px;
                border-width:10px;
                top: 9px;
                left: 9px;
            }
            .main-timeline .timeline:nth-child(even):before {
                border-radius: 0 50px 50px 0;
                border-width: 10px;
            }
            .main-timeline .timeline:nth-child(even):after {
                height: calc(100% - 18px);
                width: calc(50% - 9px);
                border-radius: 0 43px 43px 0;
                border-width: 10px;
                top: 9px;
                right: 9px;
            }
            .main-timeline .timeline-icon{ font-size: 60px; }
            .main-timeline .timeline-year{ font-size: 40px; }
        }
        @media screen and (max-width:479px){
            .main-timeline .timeline-icon{
                font-size: 50px;
                transform:translateY(0);
                top: 25%;
                left: 10%;
            }
            .main-timeline .timeline-year{
                font-size: 25px;
                transform:translateY(0);
                top: 65%;
                left: 9%;
            }
            .main-timeline .content{
                width: 68%;
                padding: 10px;
            }
            .main-timeline .title{ font-size: 18px; }
            .main-timeline .timeline:nth-child(even) .timeline-icon{
                right: 10%;
            }
            .main-timeline .timeline:nth-child(even) .timeline-year{
                right: 9%;
            }
        }
    </style>

</head>
<body style="background:url(assets/layui/font/bg-1.png)" >

<section class="pc-banner">
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <c:if test="${not empty list}">
                <c:forEach items="${list}" var="xFGH">

            <div class="swiper-slide ">

                    <img src="${xFGH.url}">

                <div class="layer-mask"></div>
        </div>
                </c:forEach>
            </c:if>
            </div>
        </div>
        <div class="button">
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>
        </div>
    </div>
</section>

<div style="height:260px;"></div>

<div class="demo">

    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="main-timeline">
                    <div class="timeline">
                        <a href="#" class="timeline-content">
                            <span class="timeline-year">2018</span>
                            <div class="timeline-icon">
                                <i class="fa fa-rocket"></i>
                            </div>
                            <div class="content">
                                <h3 class="title">发展历程</h3>
                                <p class="description">
                                    xx医院继续前行，发展壮大；
                                    开展医院建设总承包、医院运营等整体服务，创建医疗服务平台；
                                    汇聚天下英才，为医院客户提供更优质的服务；
                                    携手共创“医疗+”时代新事业！
                                </p>
                            </div>
                        </a>
                    </div>
                    <div class="timeline">
                        <a href="#" class="timeline-content">
                            <span class="timeline-year">2017</span>
                            <div class="timeline-icon">
                                <i class="fa fa-users"></i>
                            </div>
                            <div class="content">
                                <h3 class="title">发展历程</h3>
                                <p class="description">
                                    创办联合品牌“xx设计分院”
                                    与xx集团合作重组后的团队更专业、更准确的为医疗机构提供项目整体服务；
                                    客户总量已突破200+个，完成项目案例300+个。
                            </div>
                        </a>
                    </div>
                    <div class="timeline">
                        <a href="#" class="timeline-content">
                            <span class="timeline-year">2016</span>
                            <div class="timeline-icon">
                                <i class="fa fa-globe"></i>
                            </div>
                            <div class="content">
                                <h3 class="title">发展历程</h3>
                                <p class="description">
                                    在xx注册xxxx有限公司公司
                                    随着医院改革热潮到来，医院智能化得到空前发展；
                                    与国内多家医疗机构完成智能化战略合作，达成长期合作意向。
                                </p>
                            </div>
                        </a>
                    </div>
                    <div class="timeline">
                        <a href="#" class="timeline-content">
                            <span class="timeline-year">2015</span>
                            <div class="timeline-icon">
                                <i class="fa fa-briefcase"></i>
                            </div>
                            <div class="content">
                                <h3 class="title">发展历程</h3>
                                <p class="description">
                                    组建专业的医院设计团队，开始向医院的专业服务发展；
                                    从医院的咨询到设计再到品牌，进行专业性的服务；
                                    与多家知名医疗机构，签订医院建设合同；完成多个医疗项目，业务向全国覆盖。							</p>
                            </div>
                        </a>
                    </div>
                    <div class="timeline">
                        <a href="#" class="timeline-content">
                            <span class="timeline-year">2014</span>
                            <div class="timeline-icon">
                                <i class="fa fa-users"></i>
                            </div>
                            <div class="content">
                                <h3 class="title">发展历程</h3>
                                <p class="description">
                                    推出服务医疗机构建设的设计品牌xx
                                    与医疗投资集团签订医院建设项目；
                                    启动医院设计装修服务项目后，开始为多家医院提供设计服务。
                                </p>
                            </div>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>




<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="user/js/swiper.min.js"></script>
<script type="text/javascript">

    window.onload = function() {
        var swiper = new Swiper('.swiper-container',{
            autoplay: false,
            speed: 1000,
            autoplayDisableOnInteraction: false,
            loop: true,
            centeredSlides: true,
            slidesPerView: 2,
            pagination: '.swiper-pagination',
            paginationClickable: true,
            prevButton: '.swiper-button-prev',
            nextButton: '.swiper-button-next',
            onInit: function(swiper) {
                swiper.slides[2].className = "swiper-slide swiper-slide-active";
            },
            breakpoints: {
                668: {
                    slidesPerView: 1,
                }
            }
        });
    }


</script>

<script type="text/javascript" src="user/js/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="user/js/offcanvas.js"></script>

<div style="text-align:center;clear:both">
    <p>联系邮箱：xxx@xx.com</p>
    <p>联系电话：0X0-000000    X00-000000</p>
    <p>联系地址：XXX省XXX市XXX县XXX路XXX号</p>
</div>
</body>
</html>